<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 高峰期设置
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column prop="morningBegin" label="早高峰开始时间"></el-table-column>
        <el-table-column prop="morningEnd" label="早高峰结束时间"></el-table-column>
        <el-table-column prop="noonBegin" label="午高峰开始时间"></el-table-column>
        <el-table-column prop="noonEnd" label="午高峰结束时间"></el-table-column>
        <el-table-column prop="nightBegin" label="晚高峰开始时间"></el-table-column>
        <el-table-column prop="nightEnd" label="晚高峰结束时间"></el-table-column>
        <el-table-column prop="deliveryFee" label="配送费"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button type="text" icon="el-icon-edit" @click="openEdit(scope.row)">修改设置</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
      <el-form ref="form" :model="form" label-width="70px">
        <el-form-item label="早高峰开始时间">
          <el-time-picker value-format="HH:mm:ss" placeholder="选择时间" v-model="form.morningBegin" style="width: 100%;">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="早高峰结束时间">
          <el-time-picker value-format="HH:mm:ss" placeholder="选择时间" v-model="form.morningEnd" style="width: 100%;">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="午高峰开始时间">
          <el-time-picker value-format="HH:mm:ss" placeholder="选择时间" v-model="form.noonBegin" style="width: 100%;">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="午高峰结束时间">
          <el-time-picker value-format="HH:mm:ss" placeholder="选择时间" v-model="form.noonEnd" style="width: 100%;">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="晚高峰开始时间">
          <el-time-picker value-format="HH:mm:ss" placeholder="选择时间" v-model="form.nightBegin" style="width: 100%;"></el-time-picker>
        </el-form-item>
        <el-form-item label="晚高峰结束时间">
          <el-time-picker value-format="HH:mm:ss" placeholder="选择时间" v-model="form.nightEnd" style="width: 100%;"></el-time-picker>
        </el-form-item>
        <el-form-item label="配送费">
          <el-input v-model="form.deliveryFee"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'basetable',
    data() {
      return {
        tableData: [],
        form: {
          morningBegin: '',
          morningEnd: '',
          noonBegin: '',
          noonEnd: '',
          nightBegin: '',
          nightEnd: '',
          deliveryFee: ''
        },
        editVisible: false,
      };
    },
    created() {
      this.getData();
    },
    methods: {
      getData() {
        var userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.$axios.post('/adminOrder/getFastigium', this.$qs.stringify({
          shopsId: userInfo.shopsId,
        })).then(response => {
          this.tableData = response.data.fastigium;
        }).catch(err => {
          alert(err)
        })
      },

      openEdit(row) {
        this.editVisible = true;
      },
      sureBtn() {
        var userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.$axios.post('/adminOrder/setFastigium', this.$qs.stringify({
          shopsId: userInfo.shopsId,
          morningBegin: this.form.morningBegin,
          morningEnd: this.form.morningEnd,
          noonBegin: this.form.noonBegin,
          noonEnd: this.form.noonEnd,
          nightBegin: this.form.nightBegin,
          nightEnd: this.form.nightEnd,
          deliveryFee: this.form.deliveryFee
        })).then(response => {
            if(response.data){
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.editVisible = false;
            }else{
              this.$message({
                type: 'error',
                message: '修改失败，重新尝试!'
              });
            }
          console.log(response);
        }).catch(err => {
          alert(err)
        })
      },
    }
  };
</script>

<style scoped>
  .handle-box {
    margin-bottom: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    width: 300px;
    display: inline-block;
  }

  .table {
    width: 100%;
    font-size: 14px;
  }

  .red {
    color: #ff0000;
  }

  .mr10 {
    margin-right: 10px;
  }

  .table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
  }
</style>
